<template>
    <el-upload :class="{single_file}" :action="uploadOption.action" :headers="uploadOption.headers"
               :multiple="uploadOption.multiple" :data="uploadOption.data" :name="uploadOption.name"
               :with-credentials="uploadOption.withCredentials" :show-file-list="uploadOption.showFileList"
               :drag="uploadOption.drag" :accept="uploadOption.accept" :list-type="uploadOption.listType"
               :auto-upload="uploadOption.autoUpload" :file-list="uploadOption.fileList"
               :http-request="uploadOption.httpRequest" :disabled="uploadOption.disabled" :limit="uploadOption.limit"
               :on-preview="uploadOption.onPreview" :on-remove="uploadOption.onRemove"
               :on-success="uploadOption.onSuccess" :on-error="uploadOption.onError"
               :on-progress="uploadOption.onProgress" :on-change="uploadOption.onChange"
               :before-upload="uploadOption.beforeUpload" :before-remove="uploadOption.beforeRemove"
               :key="uploadOption.key"
               :on-exceed="uploadOption.onExceed" :ref="uploadOption.ref" v-get-ref="getRefFn">
        <slot/>
        <template v-if="$utils.isNotEmpty(uploadOption.tip)">
            <div slot="tip" class="el-upload__tip" v-html="uploadOption.tip" />
        </template>
    </el-upload>
</template>

<script>
import fileApi from "@common/api/fileApi";
export default {
    name: "CustomUpload",
    inject: {
        setRef: {
            default: () => {
            },
        },
    },
    props: {
        option: {
            type: Object,
            default() {
                return {};
            },
        },
        single: {
            type: Boolean,
            default: false,
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            fileApiUrl: fileApi.url,
            defaultOption: {
                ref: 'CustomUpload',
                key: new Date().getTime(),
                name: 'file',
                withCredentials: false,
                showFileList: true,
                drag: false,
                listType: 'text',
                autoUpload: true,
                fileIds: [],
                fileList: [],
                disabled: false,
                onPreview(file) {
                },
                onRemove(file, fileList) {
                },
                onSuccess(response, file, fileList) {
                },
                onError(err, file, fileList) {
                },
                onProgress(event, file, fileList) {
                },
                onChange(file, fileList) {
                },
                beforeUpload(file) {
                    return true;
                },
                beforeRemove(file, fileList) {
                    return true;
                },
                onExceed(file, fileList) {
                },
            },
            uploadOption: {},
        };
    },
    computed: {
        single_file() {
            let fileList = this.uploadOption.fileList;
            return this.single && this.$utils.isNotEmptyList(fileList);
        },
    },
    watch: {
        option: {
            handler() {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init() {
            this.uploadOption = $.extend({}, this.defaultOption, this.option, {
                disabled: this.disabled,
            });
            let account = this.$utils.getAccountSetSidEndWithSlash();
            let fileList = this.option.fileList;
            if (this.$utils.isNotEmptyList(this.option.fileIds)) {
                fileList = this.option.fileIds.map(item => {
                    return {
                        fileId: item,
                        url: `${this.fileApiUrl.getFile}${account}${item}`,
                    };
                });
            }
            this.uploadOption = $.extend({}, this.uploadOption, {
                fileList,
            });
        },
        getRefFn(c) {
            typeof this.setRef === 'function' && this.setRef(this.uploadOption.ref, c);
        },
        setFileList(fileList) {
            this.uploadOption = $.extend({}, this.uploadOption, {
                fileList,
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.single_file {
    /deep/ .el-upload--picture-card {
        display: none;
    }

    /deep/ .el-upload-list--picture-card {
        .el-upload-list__item {
            margin: 0;
        }
    }
}
</style>
